<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>后勤零件管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="">
        <el-button size="small" type="warning" @click="handleBatchDel">批量删除</el-button>
      </el-form-item>

      <el-form-item label="零件">
        <el-input size="small" clearable v-model="formInline.pname" placeholder="输入零件名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd()">添加</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="importvis=true">导入Excel</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="exportExcel()">导出Excel</el-button>
      </el-form-item>
    </el-form>
    <!--    文件上传-->
    <el-dialog title="Excel导入功能" :visible.sync="importvis" width="30%">
      <el-upload
        class="upload-demo"
        action="http://localhost:8888/api/part/importPartFile"
        :on-success="upload">
        <el-button size="small" type="primary">点击导入Excel文件</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过50MB
          <a href="http://localhost:8080/tem.xlsx">点击下载Excel模板</a></div>
      </el-upload>
    </el-dialog>
    <!--列表

        @selection-change="handleSelectionChange"  表示只要我們点击选中当前行，就会回调 handleSelectionChange方法
                        最用作用：就是多选删除
        :data="listData"   绑定数组数据
         v-loading="loading" 表示table数据在加载时的状态
    -->
    <el-table size="small" @selection-change="handleSelectionChange" :data="listData" highlight-current-row
              v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="pid" label="零件ID">
      </el-table-column>
      <el-table-column sortable prop="pname" label="零件名">
      </el-table-column>
      <el-table-column sortable prop="oneprice" label="单价">
      </el-table-column>
      <el-table-column sortable prop="quantity" label="库存数量">

    </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deletePart(scope.row.pid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 分页组件
     @callFather="callFather"  每当点击组件时 分页发起请求
    -->
    <Pagination v-bind:child-msg="pageparm" v-model="pageparm" @callFather="callFather"></Pagination>

    <!-- 添加/编辑界面
      :model="editForm"  绑定表单数据
       :rules="rules"    绑定数据校验规则
    -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="零件名称" prop="pname">
          <el-input size="small" v-model="editForm.pname" auto-complete="off" placeholder="请输入零件名"></el-input>
        </el-form-item>
        <el-form-item label="单价" prop="oneprice">
          <el-input size="small" v-model="editForm.oneprice" auto-complete="off" placeholder="请输入单价"></el-input>
        </el-form-item>
        <!--        <el-form-item label="订单时间" prop="odate">-->
        <!--          <el-input size="small" v-model="editForm.odate" auto-complete="off" placeholder="请输入时间"></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="库存数量" prop="quantity">
          <el-input size="small" v-model="editForm.quantity" auto-complete="off" placeholder="请输入库存数量"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
import axios from "axios";
import {partBatchDel, partDelete, partEdit, partList, partSave} from "../../api/PartMG";

export default {
  name: "Part",

    data() {

      return {
        importvis: false,
        nshow: true, //switch开启
        fshow: false, //switch关闭
        loading: false, //是显示加载
        editFormVisible: false, //控制编辑页面显示与隐藏
        title: '添加',
        editForm: {
          pname: '',
          oneprice: '',
          quantity: '',
        },
        // rules表单验证
        rules: {
          pname: [
            {required: true, message: '请输入零件名', trigger: 'blur'},
            {min: 1, max: 255, message: '长度在 2 到 5 个字符', trigger: 'blur'}
          ],

        },
        formInline: {
          pageNum: 1,
          pageSize: 10,
          pname: '',

        },
        // 删除
        seletedata: {
          ids: '',
        },
        userparm: [], //搜索权限
        listData: [], //用户数据
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10
        },
        userStatus: true,
        multipleSelection: []
      }
    },
    // 注册组件
    components: {
      Pagination
    },

    /**
     * 创建完毕   初始化数据 最好 在mounted初始
     */
    created() {
      this.getdata(this.formInline)
    },
    methods: {
      //导出文件
      exportExcel: function () {
        axios.request({
          url: 'http://localhost:8888/api/part/exportPartFile',
          method: 'get',
          responseType: 'blob',  // 请求文件
        }).then(ret => {
          this.download(ret, "零件信息")  // 请求导出的响应，需要保存为 学生信息的文件
        })
      },
      //文件上传的判断
      upload(res) {
        if (res == 'import_success') {
          //成功
          this.importvis = false;
          this.getdata(this.formInline);//整个界面刷新
        } else {
          this.$message({
            type: 'warning',
            message: '嗨，导入失败！！！！'
          })
        }
      },
      // 下载excel的工具方法
      download(res, name) {
        if (!res) {
          return;
        }
        console.log("res", res)
        let url = window.URL.createObjectURL(new Blob([res.data],
          {type: "application/vnd.ms-excel"}));
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', name);
        document.body.appendChild(link);
        link.click();
      },
      getdata(formInline) {
        console.log(formInline)
        /***
         * 调用接口，注释上面模拟数据 取消下面注释
         */
        partList(formInline)
          .then(res => {  // 后端响应
            this.loading = false
            if (res.code != 20000) {
              this.$message({
                type: 'info',
                message: res.msg
              })
            } else {
              const pageInfo = res.data;  //先得到pageInfo   (pageHelper 中的分页信息)
              this.listData = pageInfo.list;
              // 分页赋值
              this.pageparm.currentPage = this.formInline.pageNum
              this.pageparm.pageSize = this.formInline.pageSize
              this.pageparm.total = pageInfo.total
              console.log(this.pageparm)
            }
          })
          .catch(err => {
            this.loading = false
            this.$message.error('后勤订单信息加载失败，请稍后再试！')
          })
      },

      callFather(pageparam) {
        this.formInline.pageNum = pageparam.pageNum;
        this.formInline.pageSize = pageparam.pageSize;
        this.getdata(this.formInline)
      },
      search() {
        // console.log(this.formInline)
        this.getdata(this.formInline)
      },
      handleAdd() {
        this.editFormVisible = true;
        this.title = "添加";
        // 表单置空
        this.editForm = {};
        // this.editForm.pname = rowData.pname;
        // this.editForm.oneprice = rowData.oneprice;
        // this.editForm.quantity = rowData.quantity;



      },
      closeDialog() {
        this.editFormVisible = false;
        this.getdata(this.formInline)
      },
      submitForm(editForm) {
        // 点击提交按钮会校验输入框
        this.$refs[editForm].validate((valid) => {
          // 如果校验通过再发请求
          if (valid) {
            if (this.title === "添加") {
              // 实现添加
              partSave(this.editForm).then(res => {
                if (res.code == 20000) {
                  this.editFormVisible = false;
                  this.$message.success({
                    message: '用户添加成功',
                    duration: 500
                  })
                  this.getdata(this.formInline)
                } else {
                  this.$message.error({
                    message: '用户添加失败',
                    duration: 500
                  })
                }
              })
            } else if (this.title === "编辑") {
              console.log(this.editForm)
              partEdit(this.editForm).then(res => {
                if (res.code == 20000) {
                  this.editFormVisible = false;
                  this.$message.success({
                    message: '零件更新成功',
                    duration: 500
                  })
                  this.getdata(this.formInline)
                } else {
                  this.$message.error({
                    message: '零件更新失败',
                    duration: 500
                  })
                }
              })
            }

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleEdit(index, rowData) {
        // console.log(index,rowData)
        this.title = "编辑"
        this.editForm = rowData;
        this.editFormVisible = true;
      },
      deletePart(pid) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          partDelete(pid).then(res => {
            if (res.code === 20000) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getdata(this.formInline)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSelectionChange(val) {
        // val是数组,其中是前端框架自己封装的,其实是勾选的每一行数据对象
        console.log(val)
        var idArr = [];
        for (var i = 0; i < val.length; i++) {
          var obj = val[i];
          //console.log(obj)
          idArr.push(obj.pid);
        }
        // console.log(idArr)

        this.multipleSelection = idArr;
      },
      handleBatchDel() {
        this.$confirm('批量删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          partBatchDel({
            list: this.multipleSelection
          }).then(res => {
            if (res.code == 20000) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.formInline.pageNum = 1;
              this.getdata(this.formInline);// 重新请求数据
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }

}
</script>

<style scoped>

</style>
